<template>
	<view class="content">
		<!-- <view class="select_box">
			<view class="item">
				<text>农场</text>
				<image :src="`${baseImageUrl}/common/down.png`"></image>
			</view>
			<view class="item">
				<text>Lv1</text>
				<image :src="`${baseImageUrl}/common/down.png`"></image>
			</view>
		</view> -->
		<scroll-view scroll-y class="scroll_view">
			<HotTabs />
			<view class="list">
				<view class="item" v-for="(item,index) in 9">
					<view class="item_box">
						<view class="name">农田</view>
						<view class="cover">
							<image :src="`${baseImageUrl}/test/2.png`"></image>
							<view class="label">
								<view class="progress_view">
									<view class="progress"></view>
									<view class="text">耐久度64/100</view>
								</view>
							</view>
						</view>
						<view class="price">￥800.00</view>
					</view>
					<image :src="`${baseImageUrl}/common/d.png`" class="d_cover" v-if="index%2==0"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import HotTabs from "@/components/home/HotTabs.vue";

	export default {
		components: {
			HotTabs
		},
	}
</script>

<style scoped lang="scss">
	.content {
		height: calc(100vh - #{$navbarHeight} - 320rpx);
		padding-top: 70rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/bg/bg2.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.select_box {
			height: 70rpx;
			display: flex;
			align-items: center;
			position: absolute;
			left: 80rpx;
			top: -12rpx;

			.item {
				width: 194rpx;
				height: 50rpx;
				padding: 0 20rpx;
				background: url(#{$baseImageUrl}/common/select.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
				}

				image {
					width: 22rpx;
					height: 12rpx;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - 400rpx);
			position: relative;

			.list {
				padding-left: 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 328rpx;
					height: 414rpx;
					padding-bottom: 26rpx;
					box-sizing: content-box;
					position: relative;

					.d_cover {
						width: 750rpx;
						height: 62rpx;
						position: absolute;
						left: 0;
						bottom: 0;
					}

					.item_box {
						width: 100%;
						height: 100%;
						padding: 65rpx 0 12rpx;
						box-sizing: border-box;
						background: url(#{$baseImageUrl}/common/item.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						position: relative;
						z-index: 2;

						.name {
							color: #351400;
							font-size: 28rpx;
							font-weight: 400;
							font-family: LiSu;
						}

						.cover {
							width: 212rpx;
							height: 212rpx;
							position: relative;
							z-index: 2;

							image {
								width: 100%;
								height: 100%;
							}

							.label {
								width: 100%;
								height: 46rpx;
								background: url(#{$baseImageUrl}/common/label3.png) no-repeat;
								background-size: 100% 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								position: absolute;
								left: 0;
								bottom: 0;
								z-index: 2;

								.progress_view {
									width: 180rpx;
									height: 26rpx;
									background: #B4A88E;
									box-shadow: 0px 0px 4px 0px rgba(110, 93, 72, 0.67);
									position: relative;

									.text {
										width: 100%;
										height: 25rpx;
										line-height: 25rpx;
										text-align: center;
										color: #494338;
										font-size: 24rpx;
										font-weight: 400;
										box-sizing: border-box;
										position: absolute;
										left: 0;
										top: 0;
										z-index: 2;
									}

									.progress {
										width: 30%;
										height: 100%;
										background: linear-gradient(90deg, #E68B30, #FAD44C);
									}
								}
							}
						}

						.price {
							color: #FFFFFF;
							font-size: 18rpx;
							font-family: SimSun;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
</style>